<template >
    <main class="main1">
        <div class="tab" :class="{'tab1':!n}">
            <ul  class="tabname">
                <li v-for="(item,index) in SurpriseName " :key="index" :class="{'cur': num==index}" @click="change(index)">{{item.name}}</li>
            </ul>
             <ul class="RollTab">
                <li v-for="(item,i) in tabName " :key="i" :class="{'cur' :    tabnum==i}" @click="tab(i)">{{item.name}}</li>
            </ul>
        </div>
        <div class="tabcontent">
            <ul v-for="(item,index1) in SurpriseName"  :key="' aa'+index1" v-show="num==index1" class="tab-con">
                <li v-for="(e,i) in item.list" :key="i">
                    <div class="tab-img">
                        <img :src="e.imgurl" alt="">
                    </div>
                    <div class="tab-content">
                        <div class="tab-content-header">
                            <span>{{e.imgtitle}}</span>
                            {{e.imgtext}}
                        </div>
                        <div class="tab-content-center">
                            <span v-if="e.imgtip!=''">{{e.imgtip}}</span><span v-if="e.imgtip1!=''">{{e.imgtip1}}</span>
                        </div>
                        <div class="tab-content-sku">
                            <div class="sku">
                                <span>{{e.discountsprice}}</span>
                            </div>
                        </div>
                        <div class="tab-content-bottom">
                            <div class="left-wrap"><span style="font-weight:bold;">{{e.price}}</span><span>补贴后</span></div>
                            <div class="right-wrap"><span style=" text-decoration: line-through;">{{e.originalprice}}</span><span>新品尝鲜</span></div>
                        </div>
                    </div>
                </li>
            </ul>
             <ul v-for="(item,i1) in tabName" :key="'qq '+i1" v-show="tabnum==i1" class="tab-con">
                <li v-for="(e,i) in item.list" :key="i">
                    <div class="tab-img">
                        <img :src="e.imgurl" alt="">
                    </div>
                    <div class="tab-content">
                        <div class="tab-content-header">
                            <span>{{e.imgtitle}}</span>
                            {{e.imgtext}}
                        </div>
                        <div class="tab-content-center">
                            <span v-if="e.imgtip!=''">{{e.imgtip}}</span><span v-if="e.imgtip1!=''">{{e.imgtip1}}</span>
                        </div>
                        <div class="tab-content-sku">
                            <div class="sku">
                                <span>{{e.discountsprice}}</span>
                            </div>
                        </div>
                        <div class="tab-content-bottom">
                            <div class="left-wrap"><span style="font-weight:bold;">{{e.price}}</span><span>补贴后</span></div>
                            <div class="right-wrap"><span style=" text-decoration: line-through;">{{e.originalprice}}</span><span>新品尝鲜</span></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </main>
</template>
<script>
export default {
    name:'SurpriseList',
    data:()=>({
        SurpriseName:[],
        tabName:[],
        SurpriseList:[],
        num:0,
        tabnum:null,
        
    }),
    mounted(){
        this.getdata()
        //console.log(this.num,this.tabnum);
      // console.log(this.n);
    },
   props:{
      n:{
          type:Boolean
      }
   },
    methods:{
        getdata(){
            let that=this;
            let url='http://localhost:5000';
            this.$http.get(url+'/data/Subsidy.json')//
            .then(function (response) {
                //console.log(response);
                that.tabName=response.data.Subsidy.map(m=>({
                    name:m['name'],
                    list:m['list'].map(a=>({
                        imgtext:a['imgtext'],
                        imgtitle:a['imgtitle'],
                        imgtip:a['imgtip'],
                        imgtip1:a['imgtip1'],
                        imgurl:url+a['imgurl'],
                        price:a['price'],
                        originalprice:a['originalprice'],
                        discountsprice:a['discountsprice']
                    }))
                }));
                that.SurpriseName=response.data.Sub.map(i=>({
                    name:i['name'],
                    list:i['list'].map(e=>({
                        imgtext:e['imgtext'],
                        imgtitle:e['imgtitle'],
                        imgtip:e['imgtip'],
                        imgtip1:e['imgtip1'],
                        imgurl:url+e['imgurl'],
                        price:e['price'],
                        originalprice:e['originalprice'],
                        discountsprice:e['discountsprice']
                    }))
                   
                    //list:i['list']
                    // list.push()
                }));
               // console.log(that.SurpriseName,that.tabName);
            })
            .catch(function (error) {
            console.log(error);
            })
            .then(function () {
            // always executed
            });
        },
        change(n){
            this.num=n;
            this.tabnum=null;
        },
        tab(n){
            this.num=null
            this.tabnum=n;
            var scrooll=document.getElementsByClassName('RollTab')[0]
             scrooll.scrollLeft=scrooll.scrollLeft+((n*92)-scrooll.scrollLeft)
        }
        
    }
}
</script>
<style scoped lang="less">


@w:23.4375rem;
.main1{
    width: @w;
    position: relative;
}
.tab1{
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 1;
}
.tab{
    width: @w - 1rem;
    padding: 0rem 0.5rem;
    height: 3.3125rem;
    display: flex;
    align-items: center;
    .tabname{
        display: flex;
        li{
            width: 2.25rem;
            height:1.875rem;
            padding: 0rem .9rem;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
    }
    .RollTab{
        display: flex;
        white-space: nowrap;
        overflow-x:scroll ;
        li{
            width: 4rem;
            height: 1.875rem;
             padding:0rem .875rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .RollTab::-webkit-scrollbar{
        display: none;
    }
    .cur{
        color: #f81818;
        font-weight: 700;
        transform: scale(1.125);
        position: relative;
        transform-origin: center;
    }
    .cur::after{
        position: absolute;
        content: "";
        background-color: #f81818;
        font-size: .65rem;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0.95rem;
        height: 0.2rem;
        border-radius: 0.1rem;
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
    } 
}
.tabcontent{
        width:@w;
        .tab-con{
            width: @w - .625rem*2;
            padding: 0rem .625rem;
            padding-bottom: 6.125rem;
            li{
                width: 22.1875rem;
                height: 8.75rem;
                padding-bottom: .9375rem;
                display: flex;
                .tab-img{
                    width:@w/2 - .625rem;
                    height: 8.75rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 8.75rem;
                        height: 8.75rem;
                        border-radius:.625rem/2; 
                    }
                }
               .tab-content{
                   width: @w/2 - .625rem;
                   font-size: .875rem;
                   padding-top: .3125rem;
                   .tab-content-header{
                        width: 100%;
                        height:2.375rem;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-align: left;
                        color: #333;
                        font-weight: 700;
                        span{
                            color: #c88376;
                           padding-left:.3125rem;
                        }
                        span:after{
                            content: "|";
                            color: #e0e0e0;
                            font-weight: 400;
                            padding: 0 .3125rem;
                        }
                        
                   }
                   .tab-content-center{
                       text-align: left;
                       padding: .625rem/2 0rem;
                       font-size: .75rem;
                       span{
                           margin-right: .625rem;
                           padding:0rem .1rem;
                           color: #ff4142;
                           background-color: #fff0f0;
                           
                       }
                   }
                   .tab-content-bottom{
                       width:10.1875rem;
                       height:1.875rem ;
                       background: url('https://img20.360buyimg.com/img/s570x105_jfs/t1/186955/4/5439/4000/60b0e53bE39a97de9/2f8f923897a1215e.png') no-repeat;
                       background-size: 100%;
                       display: flex;
                       justify-content: space-between;
                       font-size: .75rem;
                       .left-wrap{
                           width: 4.8125rem - 0.625rem;
                           height: 2.1875rem;
                           span{
                               display: block;
                               color: #fff;
                               
                           }
                       }
                       .right-wrap{
                           width: 6.25rem - .9375rem;
                           height: 2.1875rem;
                            span{
                               display: block;
                              
                           }
                       }
                   }
                   .tab-content-sku{
                       margin-top: .3125rem;
                       width: 100%;
                       height: 1.5rem;
                       font-size: .75rem;
                       text-align: left;
                       position: relative;
                       .sku{
                           position: absolute;
                            left: 0;
                            top: 0;
                            color: #973800;
                            background: -webkit-linear-gradient(319.2deg,#ffe865,#ffd434);
                            background: linear-gradient(130.8deg,#ffe865,#ffd434);
                            font-size: .6rem;
                            height: 1rem;
                            line-height: .6rem;
                            padding: 0 0.15rem;
                            border-radius: 0.15rem 0.15rem 0.15rem 0;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                       }
                       .sku::after{
                            content: "";
                            position: absolute;
                            bottom: -.25rem;
                            left: 0;
                            display: inline-block;
                            width: 0;
                            height: 0;
                            overflow: hidden;
                            line-height: 0;
                            font-size: 0;
                            vertical-align: middle;
                            border-color: #ffe864 transparent currentcolor;
                            border-style: solid solid none;
                            border-width: .25rem .25rem 0;
                       }
                   }
               }
            }
        }
    }  
</style>